<template>
  <PageView>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline" :style="{height:'32px',overflow: 'hidden'}">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="发布时间">
                <a-range-picker v-model="queryParam.releaseTime" valueFormat="YYYYMMDD hh:mm:ss" style="width: 100%" />
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="关键词">
                <a-input v-model="queryParam.title" placeholder="请输入关键词" />
              </a-form-item>
            </a-col>
            <a-col :md="{span:6,offset: 2}" :sm="24">
              <div class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
                <a-button @click="resetParams">重置</a-button>
                <a-button type="primary" style="margin-left: 8px" @click="queryTable">查询</a-button>
                <a-button type="danger" v-action:add style="margin-left: 8px" @click="handleAdd">新增</a-button>
              </div>
            </a-col>
          </a-row>
        </a-form>
      </div>
    </a-card>

    <a-card :bordered="false" :style="{marginTop:'15px'}">
      <s-table
        ref="table"
        row-key="id"
        size="default"
        :columns="columns"
        :data="loadData"
      >
        <span slot="modifyTime" slot-scope="text">{{ text | moment }}</span>
        <span slot="action" slot-scope="text, record">
          <a v-action:edit @click="handleEdit(record)">编辑</a>
          <a-divider type="vertical" />
          <a-dropdown>
            <a class="ant-dropdown-link">
              更多 <a-icon type="down" />
            </a>
            <a-menu slot="overlay">
              <a-menu-item>
                <a href="javascript:;" @click="handleDetail(record)">详情</a>
              </a-menu-item>
              <a-menu-item v-action:delete>
                <a href="javascript:;" @click="delAccount(record)">删除</a>
              </a-menu-item>
            </a-menu>
          </a-dropdown>
        </span>
      </s-table>
      <post-dialog v-model="isShowDialog" v-if="isShowDialog" @success="queryTable" :record="currentRecord" />
    </a-card>
  </PageView>
</template>

<script>
import { STable } from '@/components'
import PostDialog from './postDialog'
import { DeletePost, GetPostList } from '@/api/notice'
import { PageView } from '@/layouts'

export default {
  name: 'PostList',
  components: {
    STable,
    PostDialog,
    PageView
  },
  data () {
    return {
      // 查询参数
      queryParam: {},
      // 表头
      columns: [
        {
          title: '序号',
          width: 90,
          dataIndex: '',
          key: 'rowIndex',
          align: 'center',
          customRender: (t, r, index) => {
            return ((this.paginationInfo.pageNum - 1) * this.paginationInfo.pageSize + index + 1)
          }
        },
        {
          title: '新建人',
          dataIndex: 'createEmployeeName'
        },
        {
          title: '发布时间',
          dataIndex: 'releaseTime',
          scopedSlots: { customRender: 'modifyTime' }
        },
        {
          title: '标题',
          dataIndex: 'title',
          ellipsis: true
        },
        {
          title: '操作',
          width: '150px',
          dataIndex: 'action',
          scopedSlots: { customRender: 'action' }
        }
      ],
      // 加载数据方法 必须为 Promise 对象
      loadData: parameter => {
        return GetPostList(Object.assign(parameter, this.queryParam))
          .then(res => {
            this.paginationInfo = {
              pageNum: res.data.pageNum,
              pageSize: res.data.pageSize
            }
            return res.data
          })
      },
      isShowDialog: false,
      currentRecord: null,
      paginationInfo: null
    }
  },
  computed: {},
  methods: {
    resetParams () {
      this.queryParam = {}
      this.queryTable()
    },
    queryTable () {
      if (this.queryParam.releaseTime) {
        this.queryParam.startReleaseTime = this.queryParam.releaseTime[0].format('YYYY-MM-DD') + ' 00:00:00'
        this.queryParam.endReleaseTime = this.queryParam.releaseTime[1].format('YYYY-MM-DD') + ' 23:59:59'
        delete this.queryParam.releaseTime
      }
      this.$refs.table.refresh(true)
    },
    handleAdd () {
      this.currentRecord = null
      this.isShowDialog = true
    },
    handleEdit (record) {
      this.currentRecord = {
        ...record,
        tabTitle: '编辑公告'
      }
      this.isShowDialog = true
    },
    handleDetail (record) {
      this.currentRecord = {
        ...record,
        tabTitle: '公告详情'
      }
      this.isShowDialog = true
    },
    delAccount (record) {
      const _this = this
      this.$confirm({
        title: '确定删除该记录么',
        okText: '确认',
        okType: 'danger',
        cancelText: '取消',
        onOk () {
          DeletePost({ id: record.id }).then(res => {
            if (res.success) {
              _this.$message.success('删除成功！')
              _this.$refs.table.refresh(true)
            }
          })
        },
        onCancel () {
        }
      })
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>

</style>
